/* pages/device/share.wxss */
.logPage {
    min-height: 100vh;
    background: #f8f9fa; 
    display: flex;
    flex-direction: column;
    .recordList{
        flex-grow: 1;
        height: 0;
    }
}

.searchBox {
    padding: 8rpx 24rpx 8rpx 24rpx;

    .inner {
        background: #fff;
        display: flex;
        border-radius: 12rpx;

        .icon {
            width: 64rpx;
            height: 64rpx;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #808080;
        }

        .inputBox {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }
}

.tabs {
    display: flex;
    justify-content: space-around;
    font-size: 32rpx;
    border-bottom: #DEDFE0 1px solid;

    .span {
        padding-bottom: 10rpx;
        border-bottom: transparent 4rpx solid;

        &.active {
            border-color: #058AFF;
        }
    }
}

.gap24 {
    height: 24rpx;
}

.recordList {
    padding: 24rpx;
    box-sizing: border-box;

    .list {
        padding-left: 48rpx;
        display: flex;
        flex-direction: column;
        gap: 40rpx;
        box-sizing: border-box;

        .single {
            background: #fff;
            padding: 24rpx;
            display: flex;
            flex-direction: column;
            gap: 16rpx;
            position: relative;

            &::after {
                content: '';
                display: block;
                position: absolute;
                width: 20rpx;
                height: 20rpx;
                background: #b7b9bd;
                border-radius: 50%;
                left: -49rpx;
                top: 50%;
                transform: translateY(-50%);
                border: #f8f9fa 6rpx solid;
                box-shadow: 0 0 1px rgba(0, 0, 0, 1);
            }

            &::before {
                content: '';
                display: block;
                position: absolute;
                width: 2rpx;
                height: calc(100% + 40rpx);
                background: #e0e3ea;
                border-radius: 50%;
                left: -38rpx;
                top: 0;
                transform: translateY(calc(50% - 20rpx));
            }

            &:last-child {
                &::before {
                    display: none;
                }
            }

            .dateTime {
                font-size: 28rpx;
            }

            .info {
                color: #adb5bd;
                font-size: 24rpx;
            }
        }
    }
}

.bottomBlank {
    height: 88rpx;
}